<template>
  <el-dialog
    :title="`${dialogType === 'edit' ? '编辑' : '新增'}产品服务`"
    :visible.sync="customVisible"
    width="75%"
    :before-close="handleCancel"
  >
    <el-form class="basic-form" ref="form" :model="customData" label-width="120px" :rules="rules">
      <el-form-item label="中文标题" prop="chineseTitle">
        <el-input v-model="customData.chineseTitle" clearable />
      </el-form-item>
      <el-form-item label="英文标题" prop="englishTitle">
        <el-input v-model="customData.englishTitle" clearable />
      </el-form-item>
      <el-form-item label="产品服务标签" prop="productServiceTag">
        <el-tag
          v-for="tag in customData.productServiceTag ? customData.productServiceTag.split(',') : []"
          :key="tag"
          :disable-transitions="false"
          @close="handleDeleteTag(tag)"
          closable
        >
          {{tag}}
        </el-tag>
        <el-input
          class="input-new-tag"
          v-if="tagInputVisible"
          v-model="tagValue"
          ref="saveTagInput"
          size="small"
          @keyup.enter.native="handleInputTag"
          @blur="handleInputTag"
        />
        <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 标签</el-button>
      </el-form-item>

      <el-form-item label="产品服务描述" prop="productServiceDescription">
        <el-input
          clearable
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入内容"
          v-model="customData.productServiceDescription">
        </el-input>
      </el-form-item>
      <el-form-item label="图片" prop="imageId">
        <SingleImageUpload v-model="customData.imageId" />
      </el-form-item>
      <el-form-item label="产品服务内容" prop="productServiceContent">
        <!-- <el-input
          clearable
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入内容"
          v-model="customData.productServiceContent">
        </el-input> -->
        <tinymce ref="tinymce" v-model="customData.productServiceContent" :height="300" />
      </el-form-item>
      <el-form-item label="产品效益" prop="productBenefit">
        <!-- <el-input
          clearable
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入内容"
          v-model="customData.productBenefit">
        </el-input> -->
        <tinymce ref="tinymce" v-model="customData.productBenefit" :height="300" />
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button v-waves type="primary" @click="handleOk()">确认</el-button>
      <el-button v-waves @click="handleCancel()">取消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import SingleImageUpload from '@/components/Upload/SingleImage';
import * as productHttp from '@/api/product';
import { isEnableOptions } from '@/utils/config';
import Tinymce from '@/components/Tinymce';

export default {
  name: 'edit-product',
  components: { SingleImageUpload, Tinymce },
  props: {
    title: {
      type: String,
      default: '弹框'
    },
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: [Object, undefined]
    }
  },
  data() {
    return {
      dialogType: 'add', // add / edit
      rules: {
        chineseTitle: [{ required: true, message: '请输入中文标题', trigger: 'blur' }],
        englishTitle: [{ required: true, message: '请输入英文标题', trigger: 'blur' }],
        productServiceTag: [{ required: true, message: '请添加产品服务标签', trigger: ['change', 'blur'] }],
        imageId: [{ required: true, message: '请上传图片', trigger: ['change'] }],
        productServiceContent: [{ required: true, message: '请输入产品服务内容', trigger: 'blur' }],
        productBenefit: [{ required: true, message: '请输入产品服务内容', trigger: 'blur' }],
        productServiceDescription: [{ required: true, message: '请输入产品服务描述', trigger: 'blur' }]
      },
      isEnableOptions: isEnableOptions,

      // 添加编辑标签
      tagInputVisible: false,
      tagValue: ''
    }
  },
  computed: {
    customVisible: {
      get() {
        return this.visible;
      },
      set(value) {
        this.$emit('update:visible', value);
      }
    },
    customData: {
      get() {
        return this.data || {};
      },
      set(value) {
        this.$emit('update:data', value);
      }
    }
  },
  methods: {
    handleCancel() {
      this.customVisible = false;
      this.customData = {};
      this.$refs['form'].resetFields();
    },

    // 确认
    handleOk() {
      this.$refs['form'].validate(async (valid) => {
        if (!valid) return false;

        try {
          let res;
          if (this.customData.productServiceId === void 0) {
            res = await productHttp.addProductService({ ...this.customData });
          } else {
            res = await productHttp.updateProductService({ ...this.customData });
          }

          this.$message.success('提交成功');
          this.$emit('loading', res);
          this.handleCancel();
        } catch(e) {
          console.log('edit product handleOk: ', e);
          this.$message.error('提交失败');
        }
      });
    },

    // 删除标签
    handleDeleteTag(tag) {
      const productServiceTag = this.customData.productServiceTag;
      const tagList = productServiceTag ? productServiceTag.split(',') : [];

      tagList.splice(tagList.indexOf(tag), 1)

      this.customData = { ...this.customData, productServiceTag: tagList.join(',')};
    },

    // 输入标签
    handleInputTag() {
      const tag = this.tagValue.trim();
      const productServiceTag = this.customData.productServiceTag;
      const tagList = productServiceTag ? productServiceTag.split(',') : [];

      if (tagList.indexOf(tag) > -1) {
        this.$message.warning('标签已存在');
        return
      }

      if (tag) {
        tagList.push(tag);
        this.customData = { ...this.customData, productServiceTag: tagList.join(',')};
      }

      this.tagValue = '';
      this.tagInputVisible = false;
    },

    showInput() {
      this.tagInputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    }
  },
  watch: {
    data(value) {
      // 默认有 __ob__ 值
      if (Object.getOwnPropertyNames(value).length > 1) {
        this.dialogType = 'edit';
      } else {
        this.dialogType = 'add';
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.basic-form ::v-deep {
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
}
</style>
<style lang="scss" scoped>
::v-deep {
  #mceu_42-body, #mceu_44-body {
    overflow: auto;
  }
}
</style>
